<template>
  <div class="users">
    <!-- 头部 -->
    <div class="top-nav">
      <div class="search-box">
        <!-- <el-input placeholder="根据用户Id查询" v-model="userIdSearch" class="input-with-select" clearable>
          <el-button slot="append" icon="el-icon-search" @click="toSearchId"></el-button>
        </el-input> -->
        <!-- <el-input
          v-model="serarchForm.userIdSearch"
          placeholder="Please input"
          class="input-with-select"
        >
          <template #append>
            <el-button :icon="Search" @click="toSearchId"></el-button>
          </template>
        </el-input> -->
        <!-- <el-input placeholder="根据用户名查询" v-model="userNameSearch" class="input-with-select" clearable>
          <el-button slot="append" icon="el-icon-search" @click="toSearchName"></el-button>
        </el-input> -->
        <template v-if="item.attribute.searchConfig['extendData'] && item.attribute.searchConfig.extendData['search']" >
          <el-input v-for="(item, index) in item.attribute.searchConfig.extendData.search" :key="index"
            v-model="serarchForm[item.name]"
            :placeholder="item.placeholder"
            class="input-with-select"
          >
            <template #append>
              <el-button :icon="Search" @click="toSearch(item)"></el-button>
            </template>
          </el-input>
        </template>

      </div>
      <template v-if="item.attribute.searchConfig['extendData'] && item.attribute.searchConfig.extendData['controlBtn']">
        <el-button v-for="(item, index) in item.attribute.searchConfig.extendData.controlBtn" :key="index" type="primary" @click="searchBarBtn(item)">{{item.title}}</el-button>
      </template>
    </div>
    <!-- 用户列表 -->
    <div class="user-list">
      <el-table :data="tableData" border style="width: 100%" max-height="500" row-key="id">
        <el-table-column type="index" label="序号" width="60"> </el-table-column>
        <template v-for="(item, index) in tableConfig">
          <el-table-column v-if="item['type'] === 'image'" :label="item.title" :width="item['width'] ? item.width : 'auto'">
            <template #default="scope">
              <img :src="scope.row[item.key]" alt="">
            </template>
          </el-table-column>
          <el-table-column v-else-if="!item['formatter']" :prop="item.key" :label="item.title" :width="item['width'] ? item.width : 'auto'"></el-table-column>
        <!-- </template> -->
        <!-- <template v-for="(item, index) in tableConfig"> -->
          <el-table-column v-else :label="item.title"  :width="item['width'] ? item.width : 'auto'">
            <template #default="scope">
              <div>{{ handlerTableArr(item.formatter, scope.row[item.key]) }}</div>
            </template>
          </el-table-column>
        </template>
        <el-table-column fixed="right" label="操作" width="auto">
          <template #default="scope">
            <el-button :icon="Edit" @click="editUserOpen(scope.row)" size="small" type="primary">编辑</el-button>
            <el-button :icon="Delete" type="danger" size="small" @click="removeUser(scope.row)">删除</el-button>
            <!-- <el-button v-for="item.attribute['tableButtonThreeShow'] ? item.attribute.tableButtonThreeShow.value : false" :icon="Share" type="danger" size="small" @click="setRight(scope.row)">授权</el-button> -->
            <el-button v-for="item in item.attribute.controlBtnConfig.extendData" :icon="Share" type="danger" size="small" @click="setRight(scope.row, item)">{{item.title}}</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination :small="true" class="pagination" @current-change="handleCurrentChange" v-model:current-page="currentPage"
        v-model:page-size="pageSize" layout="prev, pager, next, jumper, total" :total="total">
      </el-pagination>
    </div>

    <!-- 添加用户弹窗 -->
    <el-dialog title="添加用户" v-model="addUserDialogVisible" center>
      <el-form :model="form" :rules="rules" ref="form">
        <template v-for="item in addUserConfig">
          <el-form-item v-if="item.type === 'input'" :label="item.title" :prop="item['ruleName'] ? item['ruleName'] : ''" :label-width="formLabelWidth">
            <el-input v-model="form[item.key]" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item v-show="!item['hidden']" v-else-if="item.type === 'input-textarea'" :label="item.title" :prop="item['ruleName'] ? item['ruleName'] : ''" :label-width="formLabelWidth">
            <el-input type="textarea" v-model="form[item.key]" autocomplete="off" :autosize="{ minRows: 2, maxRows: 6 }" :disabled="item.hasOwnProperty('disabled') ? item['disabled'] : false"></el-input>
          </el-form-item>
          <el-form-item v-else-if="item.type === 'input-password'" :label="item.title" :prop="item['ruleName'] ? item['ruleName'] : ''" :label-width="formLabelWidth">
            <el-input type="password" v-model="form[item.key]" autocomplete="off"></el-input>
          </el-form-item>
          <!-- 选择框 -->
          <el-form-item v-else-if="item.type === 'select'" :label="item.title" :prop="item['ruleName'] ? item['ruleName'] : ''" :label-width="formLabelWidth">
            <div v-if="!selectList[item['keyName'] + 'select']">{{ loadSelect(item) }}</div>
            <el-select v-if="item['select']" v-model="form[item.key]" placeholder="请选择" size="medium" width="100%" :disabled="item.hasOwnProperty('disabled') ? item['disabled'] : false">
              <el-option
                v-for="item in selectList[item['keyName'] + 'select']"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <!-- 图片 -->
          <el-form-item v-show="!item['hidden']" v-else-if="item.type === 'image'" :label="item.title" :prop="item['ruleName'] ? item['ruleName'] : ''" :label-width="formLabelWidth">
            <el-upload
              class="avatar-uploader"
              :action="item.action"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="form[item.key]" :src="form[item.key]" class="avatar">
              <el-icon v-else :size="60" class="el-icon-plus avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item>
          <el-form-item v-else-if="item.type === 'cascader'" :label="item.title" :prop="item['ruleName'] ? item['ruleName'] : ''" :label-width="formLabelWidth">
            <el-cascader v-model="form[item.key]" :props="cascaderProp(item)"></el-cascader>
          </el-form-item>
        </template>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="addUserDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addUser('form', item)">确定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 编辑用户弹窗 -->
    <el-dialog title="编辑用户信息" v-model="editUserDialogVisible" center>
      <el-form :model="currentUser" class="edit-form" :rules="rules" ref="formEdit">
        <template v-for="item in editConfig">
          <el-form-item v-show="!item['hidden']" v-if="item.type === 'input'" :label="item.title" :prop="item['ruleName'] ? item['ruleName'] : ''" :label-width="formLabelWidth">
            <el-input v-model="currentUser[item.key]" autocomplete="off" :disabled="item.hasOwnProperty('disabled') ? item['disabled'] : false"></el-input>
          </el-form-item>
          <!-- 密码框 -->
          <el-form-item v-show="!item['hidden']" v-else-if="item.type === 'input-password'" :label="item.title" :prop="item['ruleName'] ? item['ruleName'] : ''" :label-width="formLabelWidth">
            <el-input type="password" v-model="currentUser[item.key]" autocomplete="off" :disabled="item.hasOwnProperty('disabled') ? item['disabled'] : false"></el-input>
          </el-form-item>
          <!-- 多行文本 -->
          <el-form-item v-show="!item['hidden']" v-else-if="item.type === 'input-textarea'" :label="item.title" :prop="item['ruleName'] ? item['ruleName'] : ''" :label-width="formLabelWidth">
            <el-input type="textarea" v-model="currentUser[item.key]" autocomplete="off" :autosize="{ minRows: 2, maxRows: 6 }" :disabled="item.hasOwnProperty('disabled') ? item['disabled'] : false"></el-input>
          </el-form-item>
          <el-form-item v-show="!item['hidden']" v-else-if="item.type === 'select'" :label="item.title" :prop="item['ruleName'] ? item['ruleName'] : ''" :label-width="formLabelWidth">
            <div v-if="!selectList[item['keyName'] + 'select']">{{ loadSelect(item) }}</div>
            <el-select v-if="item['select']" v-model="currentUser[item.key]" placeholder="请选择" size="medium" width="100%" :disabled="item.hasOwnProperty('disabled') ? item['disabled'] : false">
              <el-option
                v-for="item in selectList[item['keyName'] + 'select']"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <!-- 图片 -->
          <el-form-item v-show="!item['hidden']" v-else-if="item.type === 'image'" :label="item.title" :prop="item['ruleName'] ? item['ruleName'] : ''" :label-width="formLabelWidth">
            <el-upload
              class="avatar-uploader"
              :action="item.action"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="currentUser[item.key]" :src="currentUser[item.key]" class="avatar">
              <el-icon v-else :size="20" class="el-icon-plus avatar-uploader-icon"></el-icon>
            </el-upload>
          </el-form-item>
          <el-form-item v-show="!item['hidden']" v-else-if="item.type === 'cascader'" :label="item.title" :prop="item['ruleName'] ? item['ruleName'] : ''" :label-width="formLabelWidth">
            <el-cascader v-model="currentUser[item.key]" :props="cascaderProp(item)"></el-cascader>
          </el-form-item>
        </template>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editUserDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUser('formEdit')">确定</el-button>
      </div>
    </el-dialog>
    <SetRoleToUser :setRoleDialogVisible="setRoleDialogVisible" :curUser="currentUser" :reqConfig="reqConfig" :rightTableConfig="rightTableConfig" @closePopUp="closePopUp"></SetRoleToUser>
  </div>
</template>

<script>
  import util from './util.js'
  import SetRoleToUser from './SetRoleToUser.vue'
  import axios from 'axios';
  import { Edit, Share, Delete, Search,Upload, Plus } from '@element-plus/icons-vue'
  import zlApi from '../../packages/zlDemo/toolApi.js'
  export default {
    props: {
      item: {
        type: Object,
        default: function() {
          return null
        }
      }
    },
    name: "Users",
    components: {
      'SetRoleToUser': SetRoleToUser,
      Plus
    },
    data() {
      return {
        tableConfig: [],
        addUserConfig: [],
        editConfig: [],
        rightTableConfig: [],
        cascaderMenu: [], // 级联菜单
        selectList: {}, // 编辑或者添加选择框的结果
        reqConfig: {},
        Edit: Edit,
        Share: Share,
        Delete: Delete,
        Search: Search,
        tableData: [],
        userIdSearch: '', // 用户id
        userNameSearch: '', // 用户名
        serarchForm: {},
        form: { //添加用户信息
        },
        currentUser: { //编辑用户的信息
        },
        formLabelWidth: "100px",
        searchValue: "",
        addUserDialogVisible: false,
        editUserDialogVisible: false,
        currentPage: 1, //当前页码
        pageSize: 10, //每页展示的条数
        total: 0, //总条数
        idTypeArr: [
          {
            value: '1',
            label: '普通用户'
          },
          {
            value: '2',
            label: '管理员'
          }
        ],
        rules: {},
        setRoleDialogVisible: false, // 授权弹窗
        userInfo: {
          token: '7215561688b260f6d564d5662e16d40d47b653e38c6426fac96a5a69c5d7aec4',
          userId: 'test1',
          name: '测试',
          idType: '2'
        }
      }
    },

    created() {
      this.init();
    },

    watch: {
      item: {
        handler(v) {
          console.log('变化')
          this.init();
        },
        deep: true
      },
    },
    methods: {
      init() {
        console.log("初始化")
        this.getAllUsers();
        this.tableConfig = this.item.attribute['userTableConfig'] ? this.item.attribute.userTableConfig.extendData : [];
        this.addUserConfig = this.item.attribute['addUserDialigConfig'] ? this.item.attribute.addUserDialigConfig.extendData : [];
        this.editConfig = this.item.attribute['editUserDialigConfig'] ? this.item.attribute.editUserDialigConfig.extendData : []
        this.rules = this.item.attribute['rules'] ? this.item.attribute.rules.extendData : {}
        let serarchForm = this.item.attribute['searchConfig'] ? this.item.attribute.searchConfig.extendData : {}
        if (serarchForm.search) {
          let tempForm = {}
          serarchForm.search.map(item => {
            tempForm[item.name] = '';
          })
          this.serarchForm = tempForm
        }
        this.addUserConfig.map(item => {
          if (item.type === 'select' && item['modelValue']) {
            this.form[item.key] = item['modelValue']
          } else {
            this.form[item.key] = ''
          }
        })
        this.editConfig.map(item => {
          this.currentUser[item.key] = ''
        })
        for (let key in this.rules) {
          let temp = JSON.parse(JSON.stringify(this.rules[key]));
          if (!Array.isArray(temp)) {
            let vali = this.handlerRule(temp.ruleReg)
            let tempReg = []
            if (temp['require']) {
              tempReg.push({"required":true,"message":"请输入权限类型","trigger":"blur"})
            }
            tempReg.push({validator: vali, tigger: temp.trigger})
            this.rules[key] = tempReg
          }
        }
        console.log('this.rules', this.rules)
      },
      // 加载完成
      loadSelect(item) {
        console.log('接在', item)
        if (item['params']) {
          let reqParam = item.params.req
          let params = {
            userId: this.userInfo.userId,
            token: this.userInfo.token,
            ...zlApi.handlerReqParams(reqParam)
          }
          axios[item.params.protocol](item.params.address, {
            params: params
          }).then(res => {
            let result = zlApi.handlerRes(res.data, item.params.res)
            let [data,total] = result;
            let temp = []
            if (item.params['label']) {
              data.map(obj => {
                temp.push({
                  label: obj[item.params['label']],
                  value: obj[item.params['value']]
                })
              })
              this.selectList[item['keyName'] + 'select'] = temp
            }
            console.log(this.selectList)
          })
        } else {
          this.selectList[item['keyName'] + 'select'] = item.select;
        }
      },
      // 上传图片成功
      handleAvatarSuccess(res, file) {
        if(res.status === 0) {
          this.$message({
            message: '上传图片成功',
            type: 'success'
          });
          // console.log('res=>', res);
          console.log('file=>', file);
          this.currentUser.src = URL.createObjectURL(file.raw);
          this.form.src = URL.createObjectURL(file.raw);
        }
      },
      // 上传图片之前
      beforeAvatarUpload(file) {
        // console.log('file=>', file);
        let type = ['image/png', 'image/jpeg']
        const isPic = type.indexOf(file.type) > -1;
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isPic) {
          this.$message.error('上传的图片格式不正确!');
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
        }
        return isPic && isLt2M;
      },
      cascaderProp(item) {
        let _this = this;
        return {
          lazy: true,
          checkStrictly: true,
          emitPath: false,
          async lazyLoad (node, resolve) {
            if (_this.cascaderMenu && _this.cascaderMenu.length > 0) {
              resolve(_this.cascaderMenu)
              return
            }
            let node1 = await _this.handlerCascadar(item)
            resolve(node1)
          }
        }
      },
      // 表格是否处理成级联
      async handlerCascadar(item) {
        if (item.params['data']) {

        } else if (item.params['address']) {
          let reqParam = item.params.req
          let params = {
            userId: this.userInfo.userId,
            token: this.userInfo.token,
            ...zlApi.handlerReqParams(reqParam)
          }
          let res = await axios[item.params.protocol](item.params.address, {
            params: params
          })
          let [data, total] = zlApi.handlerRes(res.data, item.params.res)
          let cascaderMenu = [];
          if (data.constructor === Array && data.length > 0) {
            cascaderMenu = this.cascaderMenuHandle(data)
            cascaderMenu.push({
              label: '无',
              value: '',
              leaf: true
            })
          }
          this.cascaderMenu = cascaderMenu
          return cascaderMenu
        }
      },
      /**
       * 处理成级联菜单
       * */
      cascaderMenuHandle(menuData) {
        let tempArr = []
        menuData.map(item => {
          let tempObj = {
            value: item.id,
            label: item.name
          }
          if (item.children.length > 0) {
            tempObj.children = this.cascaderMenuHandle(item.children)
          } else {
            tempObj.leaf = true
          }
          tempArr.push(tempObj)
        })
        return tempArr
      },
      // 处理表格数组
      handlerTableArr(arr, key) {
        if (!key) return
        let temp = arr.find(item => {
          return item.key === key
        })
        return temp && temp['value'] ? temp['value'] : ''
      },
      // 表格工具栏按钮点击事件处理
      searchBarBtn(item) {
        if (item['dialog']) {
          this.addUserDialogVisible = true;
          this.addUserConfig = this.item.attribute[item['dialog']] ? this.item.attribute[item['dialog']].extendData : []
        } else {
          let params = {
            userId: this.userInfo.userId,
            token: this.userInfo.token,
          }
          let reqParam = item.req
          if (reqParam !== null) {
            reqParam.map(item => {
              params[item] = row[item]
            })
          }
          axios[item.protocol](item.address, {
            params: params
          }).then(res => {
            this.$message({
              message: '操作成功',
              type: 'success'
            });
            if (item['reflash']) {
              this.getAllUsers();
            }
          })
        }
      },
      // 处理rule
      handlerRule(obj) {
          return function(rule, value, callback) {
              let reg = new RegExp(obj.reg, 'g')
              // if (obj.require && !value)  {
              //     return callback(new Error('不能为空'));
              // }
              if (obj.min && obj.max) {
                  if (obj.min > value.length || value.length > obj.max) {
                      return callback(new Error(`长度${obj.min}在到${obj.max}个字符`));
                  }
              } else if (obj.min) {
                  if (obj.min > value.length) {
                      return callback(new Error(`长度需多于${obj.min}个字符`));
                  }
              } else if (obj.max) {
                  if (obj.max < value.length) {
                      return callback(new Error(`长度需少于${obj.max}个字符`));
                  }
              }
              if (value.match(reg)) {
                  return callback(new Error('存在非法字符'));
              }
              callback()
          }
      },
      // 根据用户id查询
      toSearchId() {
        if(!this.userIdSearch) {
          this.$message.info('请输入用户Id');
          return;
        }
        this.currentPage = 1;
        let params = {
          nUserId: this.userIdSearch,
          userId: this.userInfo.userId,
          token: this.userInfo.token
        }
        axios.get('http://localhost:3000/yun/manager/user/userById', {
          params: params
        }).then(res => {
          if (res.data.status === 0) {
            this.$message({
              message: '查询用户信息成功',
              type: 'success'
            });
            let json = [res.data.data]
            json.map((v, i) => {
              v.index = i + 1;
            });
            this.tableData = json;
            this.data.total = res.data.total;
          }else {
            this.$message.error('查询不到该用户!');
            this.tableData = [];
          }
        })
      },
      toSearch(item) {
        this.currentPage = 1;
        this.getUserByNameReq(item);
      },

      // 按用户名请求
      getUserByNameReq(item) {
        let params = {
          // keyword: this.userNameSearch,
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          userId: this.userInfo.userId,
          token: this.userInfo.token
        }
        item.req.map(item1 => {
          params[item1] = this.serarchForm[item.name]
        })
        axios[item.protocol](item.address, {
          params: params
        }).then(res => {
          if (res.data.status === 0) {
            this.$message({
              message: '查询成功',
              type: 'success'
            });
            let response = item.res
            let temp = res
            response.data.split('.').map(item => {
              temp = temp[item]
            })
            this.tableData = temp
            temp = res
            response.total.split('.').map(item => {
              temp = temp[item]
            })
            this.total = temp
          }
        })
      },

      // 获取全部用户信息
      getAllUsers() {
        let params = {
          userId: this.userInfo.userId,
          token: this.userInfo.token,
          pageNum: this.currentPage,
          pageSize: this.pageSize,
        };
        let protocol = this.item.attribute.userList.extendData.protocol
        axios[protocol](this.item.attribute.userList.extendData.address, {
          params: params
        }).then((res) => {
          if (res.data.status === 0) {
            let response = this.item.attribute.userList.extendData.res
            let temp = res
            response.data.split('.').map(item => {
              temp = temp[item]
            })
            this.tableData = temp
            temp = res
            response.total.split('.').map(item => {
              temp = temp[item]
            })
            this.total = temp
          }
        });
      },

      // 添加用户
      addUser(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let reqParam = this.item.attribute.userListAdd.extendData.req
            let params = {
              userId: this.userInfo.userId,
              token: this.userInfo.token,
              ...zlApi.handlerReqParams(reqParam, {form: this.form})
            }
            let protocol = this.item.attribute.userListAdd.extendData.protocol
            axios[protocol](this.item.attribute.userListAdd.extendData.address, params).then(res => {
              if (res.data.status === 0) {
                this.addUserDialogVisible = false;
                this.$message({
                  message: '修改信息成功',
                  type: 'success'
                });
                this.getAllUsers();
              }
            })
          }else {
            return false;
          }
        })

      },

      // 打开编辑用户弹窗
      editUserOpen(row) {
        this.editUserDialogVisible = true;
        let temp = {}
        for (let key in this.currentUser) {
          this.currentUser[key] = row[key]
        }

        // this.currentUser = temp
        console.log('结果', this.currentUser)
        // this.currentUser.nUserId = row.userId;
        // this.currentUser.name = row.name;
        // this.currentUser.idType = row.idType;
        // this.currentUser.token = row.token;
      },

      // 编辑用户信息
      editUser(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let reqParam = this.item.attribute.userListPut.extendData.req
           let params = {
             userId: this.userInfo.userId,
             token: this.userInfo.token,
             ...zlApi.handlerReqParams(reqParam, {currentUser: this.currentUser})
           }
           // for (let key in reqParam) {
           //   params[key] = this.currentUser[reqParam[key]]
           // }
           let protocol = this.item.attribute.userListPut.extendData.protocol
           axios[protocol](this.item.attribute.userListPut.extendData.address, params).then(res => {
             this.editUserDialogVisible = false;
             if (res.data.status === 0) {
               this.$message({
                 message: '修改信息成功',
                 type: 'success'
               });
               this.getAllUsers();
             }
           })
          }else {
            return false;
          }
        })
      },

      // 删除用户
      async removeUser(row) {
        if(row['userId'] && row.userId === this.userInfo.userId) {
          return this.$message.error('不允许删除自己的账号');
        }
        // 弹框询问
        const confirmResult = await this.$confirm(
          "此操作将永久删除该用户所有信息, 是否继续?",
          "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
            center: true,
          }
        ).catch((err) => {
          return err;
        });
        if (confirmResult !== "confirm") {
          return this.$message.info("已取消删除");
        }
        let reqParam = this.item.attribute.userListDelete.extendData.req
        let params = {
          userId: this.userInfo.userId,
          token: this.userInfo.token,
          ...zlApi.handlerReqParams(reqParam, {row: row})
        }
        // if (reqParam !== null) {
        //   for (let key in reqParam) {
        //     params[key] = row[reqParam[key]]
        //   }
        // }
        let protocol = this.item.attribute.userListDelete.extendData.protocol
        let paramData = protocol.toUpperCase() === 'GET' ? {params: params} : {data: params}
        axios[protocol](this.item.attribute.userListDelete.extendData.address, paramData).then(res => {
          if (res.data.status === 0) {
            this.$message({
              message: '删除成功',
              type: 'success'
            });
          }
          this.getAllUsers();
        })
      },

      // 页码改变
      handleCurrentChange(val) {
        this.currentPage = val
        if(this.userNameSearch === '') {
          this.getAllUsers();
        } else {
          this.getUserByNameReq();
        }
      },
      // 清空token
      clearToken() {
        this.currentUser.token = '';
      },

      // 生成token
      getToken() {
        this.currentUser.token = util.strLen();
      },

      // 清空token
      clearToken() {
        this.currentUser.token = '';
      },

      // 生成token
      getToken() {
        this.currentUser.token = util.strLen();
      },
      // 打开授权页面
      setRight(rowData, item) {

        this.currentUser = rowData
        this.setRoleDialogVisible = true
        if (item['dialog']) {
          this.rightTableConfig = this.item.attribute[item['dialog']] ? this.item.attribute[item['dialog']].extendData : [],
          this.reqConfig = {
            unSetRightList: this.item.attribute['unSetRightList'] ? this.item.attribute.unSetRightList : null,
            setRightList: this.item.attribute['setRightList'] ? this.item.attribute.setRightList : null,
            searchRight: this.item.attribute['searchRight'] ? this.item.attribute.searchRight : null,
            confirmSetRight: this.item.attribute['confirmSetRight'] ? this.item.attribute.confirmSetRight : null,
            cancelSetRight: this.item.attribute['cancelSetRight'] ? this.item.attribute.cancelSetRight : null
          }
        } else {
          let params = {
            userId: this.userInfo.userId,
            token: this.userInfo.token,
          }
          let reqParam = item.req
          if (reqParam !== null) {
            reqParam.map(item => {
              params[item] = row[item]
            })
          }
          let protocol = this.item.attribute.userListDelete.extendData.protocol
          axios[protocol](this.item.attribute.userListDelete.extendData.address, {
            params: params
          }).then(res => {
            this.$message({
              message: '操作成功',
              type: 'success'
            });
            if (item['reflash']) {
              this.getAllUsers();
            }
          })
        }
      },
      /**
       * 关闭弹窗
       * */
      closePopUp() {
        this.setRoleDialogVisible = false
      },
    },
    mounted() {
    }
  };
</script>

<style lang="less" scoped>
  .users {
    padding: 20px;
    border-radius: 2px;
    background-color: #ffffff;

    .input-with-select {
      width: 200px;
      margin-right: 20px;
    }

    .top-nav {
      display: flex;
      margin-bottom: 20px;

      .search-box {
        margin-right: 20px;
      }
    }

    .token-input {
      width: 73%;
      margin-right: 18px;
    }
    .user-list {
      img {
        width: 80%;
        height: auto;
      }
    }
    .edit-form {
      img {
        width: 220px;
        height: auto;
      }
    }
    .dialog-footer,
    .footer {
      text-align: center;
    }
    /deep/.el-form-item__content {
      // justify-content: center;
    }
    /deep/.el-table th {
      text-align: center;
    }
    /deep/.el-table td {
      text-align: center;
    }
    /deep/.el-select {
      width: 100%;
    }
    /deep/.el-icon-plus {
      // width: 80px;
      // height: 80px;
    }
  }
</style>
